<template>
  <div>
    <HomeHeader></HomeHeader>
    <div class="wraper" ref="homeWrapper">
      <div>
        <!-- ceshi tree -->
        <HomeSwiper :swiper-list="swiperList"></HomeSwiper>
        <HomeIcons :icons-list="iconsList"></HomeIcons>
        <HomeRecommend :recommend-list="recommendList"></HomeRecommend>
        <HomeWeekend :weekend-list="weekendList"></HomeWeekend>
      </div>
    </div> 
  </div>
</template>

<script>
// import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
  export default {
    name: 'Home',
    components: {
      // 'HomeHeader': HomeHeader,
      //按需加载
      HomeHeader: () => import('./components/Header'),
      'HomeSwiper': HomeSwiper,
      'HomeIcons': HomeIcons,
      'HomeRecommend': HomeRecommend,
      'HomeWeekend': HomeWeekend
    },
    data: function(){
      return {
        lastCity: '',
        swiperList: [],
        iconsList: [],
        recommendList: [],
        weekendList: []
      }
    },
    computed: {
      ...mapState({
        curCity: 'city'
      })
    },

    methods: {
      getHomeInfo: function(){
        axios.get('/api/index.json?city=' + this.curCity)
          .then(this.getHomeInfoSuccess)
      },
      getHomeInfoSuccess: function(res){
        if(res.data.ret && res.data.data){
          var data = res.data.data;
          this.swiperList = data.swiperList;
          this.iconsList = data.iconsList;
          this.recommendList = data.recommendList; 
          this.weekendList = data.weekendList; 
        }
      }
    },
    mounted: function(){
      this.getHomeInfo();
      this.scroll = new BScroll(this.$refs.homeWrapper, {
        click: true,
        scrollY: true,
      });
      // console.log(this.$refs.homeWrapper)
    },
    activated: function(){
      if(this.lastCity !== this.city){
        this.lastCity = this.city;
        this.getHomeInfo();
      }
    },
    deactivated: function(){

    }
  }
</script>

<style lang="stylus" scoped>
  
</style>
